<template>
    <div class="imgUpload">
        <div class="report_img_upload">
            <div class="headimg">
                <div style="position:relative" v-show="img">
                    <div class="close_img" @click="close()">
                        <img src="@/assets/images/user/ic_close_red@2x.png" alt="">
                    </div>
                    <img :src="img" alt="">
                </div>
                <div class="img_box" v-if="!img">
                    <img src="/static/img/img-addpictrue@2x.png" alt="">
                    <label id="file-upload" for="file"></label>
                </div>
            </div>
            <input type="file" :multiple="multiple" style="display:none" ref="input" name="image" id="file" accept="image/*" @change="upload($event)">
        </div>
    </div>
</template>
<script>
import qiniu from '@/api/qiniu'
export default {
    prop: {
        // emmmm 要睡觉了 以后再写
        // // 是否支持多选 默认不会
        // multiple: {
        //     type: Boolean,
        //     default: false
        // },
        // // 是否支持选择一张后 可以继续选择
        // multi: {

        // }
    },

    name: 'imgUpload',
    data() {
        return {
            file: '',
            img: '',
            files: {}
        }
    },
    methods: {
        upload(e) {
            // console.log(this.$refs.input.target)

            async function upload(e, that) {
                if (e.target.files.length) {
                    that.$dialog.loading.open('上传中')
                }
                for (var i = 0; i < e.target.files.length; i++) {
                    var item = e.target.files[i]
                    // if (item.size > 10 * 1024 * 1024) {
                    //     that.$toast({
                    //         message: '图片不得超过10M',
                    //         duration: 2000
                    //     })
                    //     return false
                    // }
                    var str = qiniu.str(6)
                    var formdata = new FormData()
                    formdata.append('file', item)
                    formdata.append('token', qiniu.token)
                    formdata.append(
                        'key',
                        'art' +
                            new Date().getTime() +
                            str +
                            '.' +
                            item.type.split('/')[1]
                    )
                    var res = await that.axios.post(qiniu.domain, formdata)
                    if (i == e.target.files.length - 1) {
                        that.$dialog.loading.close()
                    }
                    if (res.data.key) {
                        that.file = qiniu.qiniuurl + res.data.key
                        that.img = URL.createObjectURL(item)
                        that.$emit('result', that.img, that.file)
                        that.$refs.input.files = that.files
                    }
                }
            }
            upload(e, this)
        },
        close() {
            this.img = ''
            this.file = ''
            this.$emit('remove')
        }
    },
    mounted() {
        // this.$refs.input.files =  FileList
        // console.log(typeof this.$refs.input.files)
        this.files = this.$refs.input.files
    }
}
</script>
<style scoped>
.report_img_upload {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.img_box {
    border-radius: 5px;
    height: 1.6rem;
    width: 1.6rem;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 1.2rem;
    position: relative;
}
.img_box img {
    width: 100%;
    margin: 0 !important;
}
#file-upload {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.headimg {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.headimg .close_img {
    width: 0.34rem;
    height: 0.34rem;
    position: absolute;
    top: -0.1rem;
    right: 0.05rem;
    /* background: #fff; */
}
.headimg .close_img img {
    width: 100%;
    height: 100%;
}
.headimg img {
    margin-right: 0.15rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.15rem;
}
</style>